<div class="card">
    <div class="card-block">
        <button type="button" class="btn btn-primary pull-left" onclick="back_to_list()"><i class="fa fa-arrow-left" /> 返回</button>
    </div>
    <div class="card-block">
        <form id="form1">
            <div class="row">
                <div class="form-group col-sm-6">
                    <label for="name">登陆名</label>
                    <input type="text" class="form-control" id="user" name="user" value="{user}" placeholder="4-20字符">
                </div>
                <div class="form-group col-sm-6">
                    <label for="email">电子邮件</label>
                    <input type="text" class="form-control" id="email" name="email" value="{email}" placeholder="请输入电子邮件地址">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-sm-6">
                    <label for="pass">密码</label>
                    <input type="text" class="form-control" id="pass" name="pass" value="" placeholder="如果不需要修改密码请留空">
                </div>
                <div class="form-group col-sm-6">
                    <label>账号状态</label><br />
                    <button type="button" id="btn-status-1" class="btn-status btn btn-outline-success">正常</button>
                    <button type="button" id="btn-status-2" class="btn-status btn btn-outline-warning">锁定</button>
                </div>
            </div>
            <div class="form-check">
                <p>角色</p>
                <hr />
                {role_list}
                <hr />
            </div>
            <button type="submit" class="btn btn-primary"><i class="fa fa-save" /> 保存</button>
            <input type="hidden" id="id" name="id" value="{id}">
        </form>
    </div>
</div>
<script type="text/javascript" src="/static/jquery/jquery.md5.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var locked = parseInt("{locked}");
        if(status == 0) $("#btn-status-1").addClass("active");
        if(status == 1) $("#btn-status-2").addClass("active");

        $(".btn-status").bind("click", function(){
            $(".btn-status").removeClass("active");
            $(this).addClass("active");
        });

        $("#form1").submit(function () {
            var locked = "";
            if($("#btn-status-1").hasClass("active")) locked = 0;
            if($("#btn-status-2").hasClass("active")) locked = 1;

            var id = $("#id").val();
            var user = $("#user").val();
            var pass = $("#pass").val();
            var email = $("#email").val();

            var role_ids = new Array();
            $("input[name='role']:checked").each(function () {
                role_ids.push($(this).val());
            });

            $.ajax({
                url: "?m=members&a=edit_save",
                type: "POST",
                data: { user: user, pass: $.md5(pass), email: email, locked: locked, id: id, role_ids: role_ids.join(",") },
                dataType: "json",
                error: function(xhr,textStatus){
                    alert(textStatus);
                },
                success: function (data,textStatus,jqXHR) {
                    if(data.status == "error") {
                        alert(data.msg);
                    } else {
                        back_to_list();
                    }
                }
            });
            return false;
        });
    });

    function back_to_list() {
        _goto("?m=members&a=user_list&page={page}");
    }
</script>